import { AntDesignOutlined } from '@ant-design/icons';
import { Avatar, Button, Card, Col, Flex, Form, Input, message, Row } from 'antd';
import React from 'react';
import styles from "./index.module.scss";

const UserCenter: React.FC = () => {
    const [form] = Form.useForm();
    const onFinish = (e: any) => {
        form.resetFields();
        message.success('修改成功');
    }
    return (
        <div>
            <Row gutter={[10, 10]}>
                <Col span={24}>
                    <Card title="个人信息" styles={{ header: { borderBottom: 'none' } }}>
                        <Row gutter={[10, 10]}>
                            <Col>
                                <Avatar
                                    size={140}
                                    icon={<AntDesignOutlined />}
                                />
                            </Col>
                            <Col style={{ display: "flex", flexDirection: "column", justifyContent: "space-evenly" }}>
                                <p className={styles.title}>管理员，您好，这里是个人中心模板。</p>
                                <Flex justify='space-between'>
                                    <span>
                                        用户名：admin
                                    </span>
                                    <span>
                                        角色：admin
                                    </span>
                                </Flex>
                                <p>
                                    <span>
                                        id：1
                                    </span>
                                </p>
                            </Col>
                        </Row>
                    </Card>
                </Col>
                <Col span={24}>
                    <Card title="信息修改" styles={{ header: { borderBottom: 'none' } }}>
                        <Flex justify='center'>
                            <Col span={8}>
                                <Form form={form} layout='vertical' onFinish={onFinish}>
                                    <Form.Item label="姓名" name="username" rules={[{ required: true, message: "请输入姓名" }]}>
                                        <Input placeholder="请输入姓名" />
                                    </Form.Item>
                                    <Form.Item label="年龄" name="age" rules={[{ required: true, message: "请输入年龄" }]}>
                                        <Input placeholder="请输入年龄" />
                                    </Form.Item>
                                    <Form.Item label="电话号码" name="phone" rules={[{ required: true, message: "请输入电话号码" }]}>
                                        <Input placeholder="请输入电话号码" />
                                    </Form.Item>
                                    <Form.Item>
                                        <Flex justify='center'>
                                            <Button style={{ flex: "1 0" }} type="primary" htmlType='submit'>提交</Button>
                                        </Flex>
                                    </Form.Item>
                                </Form>
                            </Col>
                        </Flex>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default UserCenter;